<!-- 专业选择 -->
<template>
  <c-popup title="选择专业" v-model="popupVisible">
    <view class="job-intention__popup">
      <wd-search
        class="job-intention__popup__search"
        placeholder="快来精准搜索专业吧～"
        hide-cancel
        placeholder-left
        size="large"
        v-model="majorName"
        @search="getMajorList"
      />
      <scroll-view scroll-y class="job-intention__popup__scroll" :scroll-left="100">
        <view
          v-for="item in majorList"
          :key="item.id"
          :class="['job-intention__popup__cell', { active: item.name === currentMajor }]"
          @click="handleChooseMajor(item)"
        >
          <view class="job-intention__popup__cell--title">
            <view>{{ item.name }}</view>
            <view class="subtitle" v-if="item.parentOneName"
              >{{ item.parentOneName }}/{{ item.parentName }}</view
            >
          </view>
          <wd-icon
            name="check-circle-filled"
            size="32rpx"
            color="#FF800E"
            v-if="item.name === currentMajor"
          ></wd-icon>
        </view>
      </scroll-view>
    </view>
  </c-popup>
</template>

<script setup>
  import { ApiQueryMajorByName } from '@/service/major';
  const majorName = ref('');
  const majorList = ref([]);
  const currentMajor = ref('');
  const emit = defineEmits(['confirm']);
  const popupVisible = ref(false);

  const getMajorList = () => {
    ApiQueryMajorByName({ name: majorName.value }).then((res) => {
      majorList.value = [{ name: '暂不选择' }, { name: '专业不限' }, ...res.data];
    });
  };
  const handleChooseMajor = (item) => {
    currentMajor.value = item.name;
    popupVisible.value = false;
    emit('confirm', item.name);
  };
  const open = () => {
    popupVisible.value = true;
  };
  onMounted(() => {
    getMajorList();
  });

  defineExpose({
    open,
  });
</script>

<style lang="scss" scoped>
  .job-intention {
    &__popup {
      margin: 0 -32rpx;
      overflow: hidden;
      &__search {
        margin: 0 0 16rpx;
      }
      &__scroll {
        height: 800rpx;
      }
      &__cell {
        display: flex;
        align-items: center;
        padding: 22rpx 0;
        margin: 0 32rpx;
        border-bottom: 2rpx solid rgba(0, 0, 0, 0.06);
        &--title {
          flex: 1 0 0;
          view {
            &:first-child {
              color: #191919;
              font-size: 26rpx;
            }
            &.subtitle {
              font-size: 20rpx;
              color: rgba(0, 0, 0, 0.3);
              margin-top: 8rpx;
            }
          }
        }
        &.active {
          .job-intention__popup__cell--title {
            view,
            &.subtitle {
              color: #ff800e;
            }
          }
        }
      }
    }
  }
</style>
